import { Button } from 'antd'
import { FC, useRef } from 'react'
import { Consumer } from '../context'
import { ICreateContent, ITodo } from '../data'
const Input: FC = () => {
  const inpRef = useRef<HTMLInputElement>(null)
  const addItem = (addTodo: (val: ITodo) => void, todoList: ITodo[]) => {
    const val = inpRef.current?.value.trim()
    if (val) {
      const flag = todoList.some(item => {
        return item.value === val
      })
      if (!flag) {
        addTodo({
          value: val,
          completed: false,
          id: Math.random() * 10000
        })
      }

      inpRef.current!.value = ''
      inpRef.current!.focus()
    }


  }
  return <div>
    <Consumer>
      {
        (val: ICreateContent | null) => {
          const { addTodo, todoList } = val as ICreateContent
          return (
            <div>
              <input ref={inpRef}></input>
              <Button type='primary' onClick={() => { addItem(addTodo, todoList) }}>add</Button>
            </div>
          )
        }
      }

    </Consumer>

  </div>
}

export default Input